<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* animation是一个简写属性
				他可以规定所有的动画属性
				ease-in-out就是一个过渡效果，规定动画缓慢的开始，缓慢的结束，相对比较匀速
				infinite属性规定动画无限循环 */
			/* @keyframes是规定动画的内容
			在这里我用的关键词是0%-100%，也可以用from to
			他们的定义都是都开始到结束*/
			.pic {
				width: 1500px;
				animation: banner 5s infinite;
			}

			.pic img {
				width: 500px;
				float: left;
			}

			.banner {
				width: 500px;
				overflow: hidden;
			}

			@keyframes banner {
				/* 0% {
					margin: 0;
				}

				50% {
					margin-left: -500px;
				}

				100% {
					margin-left: -1000px;
				} */

				/* from{
					margin: 0;
				}
				to{
					margin-left: -1000px;
				} */
			}
		</style>

	</head>
	<body>
		
		
		
		<div class="banner">
			<div class="pic">
				<img src="../05盒子模型/banner.jpg">
				<img src="../05盒子模型/banner.jpg">
				<img src="../05盒子模型/banner.jpg">
			</div>
		</div>
<style type="text/css">
	li{
		display: inline-block;
	}
	.menu{
		position: absolute;
		display: none;
	}
	li:hover .menu{
		display: block;
	}
	a{
		text-decoration: none;
	}
</style>
		<ul>
			<li>
				<a href="">关于金浦</a>
				<div class="menu">
					<p>公司介绍</p>
					<p>董事长致辞</p>
					<p>金埔文化</p>
					<p>业务分布</p>
					<p>战略合作</p>
					<p>发展历程</p>
					<p>企业资质</p>
				</div>
			</li>
			<li>
				<a href="">关于金浦</a>
			</li>
			<li>
				<a href="">关于金浦</a>
				<div class="menu">
					<p>公司介绍</p>
					<p>董事长致辞</p>
					<p>金埔文化</p>
					<p>业务分布</p>
					<p>战略合作</p>
					<p>发展历程</p>
					<p>企业资质</p>
				</div>
			</li>
			<li>
				<a href="">关于金浦</a>
				<div class="menu">
					<p>公司介绍</p>
					<p>董事长致辞</p>
					<p>金埔文化</p>
					<p>业务分布</p>
					<p>战略合作</p>
					<p>发展历程</p>
					<p>企业资质</p>
				</div>
			</li>
			<li>
				<a href="">关于金浦</a>
				<div class="menu">
					<p>公司介绍</p>
					<p>董事长致辞</p>
					<p>金埔文化</p>
					<p>业务分布</p>
					<p>战略合作</p>
					<p>发展历程</p>
					<p>企业资质</p>
				</div>
			</li>
		</ul>


	</body>
</html>
